<%--
  author: winkyle
  date: 2018/11/22
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jsp文件头和头部 -->
    <%@ include file="../../base/top.jsp" %>
</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="hr hr-18 dotted hr-double"></div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="col-xs-12" style="text-align: center;">
                            <ul class="pagination no-margin" style="vertical-align: top">
                                <li id="pre" style="cursor: default"><img style="width: 30px;height: 30px"
                                                                          src="static/images/task/pre.bmp">
                            </ul>
                            <ul id="ul" class="pagination no-margin">
                            </ul>
                            <ul class="pagination no-margin" style="vertical-align: top">
                                <li id="next" style="cursor: default"><img style="width: 30px;height: 30px;"
                                                                           src="static/images/task/next.bmp">
                            </ul>
                        </div>
                        <div class="col-xs-12">
                            <div style="margin-top: 15px; width: 100%; height: 1px; background-color: #c7cec9"></div>
                            <div class="col-xs-6" style="margin-top: 8px; text-align: left" >
                                <input id = 'all' style="cursor:pointer;" type="radio">全部</input>
                            </div>
                            <div class="col-xs-6" style="margin-top: 8px; text-align: right">
                                <a id="taskDetails" style="cursor:pointer;" target="mainFrame" hidden="true">查看详情</a>
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <table id="data-table" width="100%" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>名称</th>
                                    <th>期限</th>
                                    <th>状态</th>
                                    <th>得分</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
    <!-- 返回顶部 -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>

</div>
<!-- /.main-container -->
<!-- basic scripts -->
<!-- 页面底部js¨ -->
<%@ include file="../../base/foot.jsp" %>

<script type="text/javascript">
    $(top.hangge());
    var table = null;
    var assignmentUrl = 'assignment/search_assignment_relevant_data_details';
    var assignmentParam = {
        teachCourseId:"${teachCourseId}"
    };
    var columnsData =  [
        {
            bSortable : false,
            data: null,
            width : "40px",
            className: 'text-center whiteSpace',
            render:function(data,type,row,meta) {
                return meta.row + 1 +
                    meta.settings._iDisplayStart;
            }
        },
        {'data': 'assignmentName',
            render:function(data,type,row,meta) {
                return "<a style='cursor: pointer' onclick='showDetail(this)'>"+data+"</a>";
            }
        },
        {'data': 'deadline'},
        {'data': 'assignmentState',
            render:function(data,type,row,meta) {
                if(data==0){
                    return "未阅";
                }else if(data == 1){
                    return "未批";
                }else if(data == 2){
                    return "已批";
                }
                return data;
            }
        },
        {'data': 'taskGrade',
            render:function(data,type,row,meta) {
                if(data==null){
                    return "";
                }
                return data;
            }
        }
    ];
    var dataBaseFiled =  [
        {'data': 'assignment_name'},
        {'data': 'task_start_time'},
        {'data': 'assignment_state'},
        {'data': 'task_grade'}
    ];
    $(document).ready(function () {
        table = $('#data-table').DataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION,{
            columns:columnsData,
            ajax: function (data,callback) {
                ajax(data,callback,dataBaseFiled,assignmentUrl,assignmentParam);
            },
            order:[[ 1, "asc" ]]
        }));

        var url = 'task/search_task_infos';
        var param = {teachCourseId: "${teachCourseId}"};
        var field = {
            sortField: 'task_name',
            orderDir: 'desc', limit: [2], pageBar: {prePage: $("#pre"), nextPage: $("#next")}
        };

        var loadPage = LoadPage($('#ul'), url, param, field,
            function (data) {
                var li;
                li = $("<li class='task' style='cursor: default' value='" + JSON.stringify(data) + "'><a><font class='active'>" + data.taskName + "</font></a></li>");
                return li;
            },
            {
                row: function (data) {

                },
                all: function (data) {
                    $(".task").each(function () {
                        $(this).click(function () {
                            $(".task").each(function () {
                                $(this).removeClass();
                                $(this).attr("class", "task");
                            });
                            $(this).attr("class", "task active");
                            var task = JSON.parse($(this).attr("value"));
                            assignmentParam = {
                                teachCourseId:"${teachCourseId}",
                                taskId:task.taskId
                            };
                            selectedTask = '?' + parseParam(task);
                            $("#taskDetails").show();
                            $("#all").prop("checked",false);
                            reloadDataTable();
                        })
                    });
                }
            });
        $("#all").click(function () {
            delete assignmentParam.taskId;
            $("#all").prop("checked",true);
            selectedTask = '';
            $("#taskDetails").hide();
            reloadDataTable();
        });
        $("#all").prop("checked",true);
        var selectedTask;
        $("#taskDetails").click(function () {
            addTab('0', '0', '任务详情', 'task/view_my_task_details' + selectedTask);
        });
    });
</script>
</body>
</html>